<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml" xmlns:p="http://primefaces.org/ui">
	<ui:define name="title">Map view page</ui:define>

	<ui:define name="script">
		<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript"></script>
		<script>
			window.onload = function() {
				var ready = $.isReady;
				if (ready)
					mypoll.start();
			}

			function handlePollComplete(xhr, status, args) {
				mypoll.stop();
			}
		</script>
	</ui:define>

	<ui:define name="menu">
		<ul>
			<li><a href='service.jsf'><span>Service</span></a></li>
			<li><a href='taxi.jsf'><span>Taxi</span></a></li>
			<li class="active"><a href='map-view.jsf'><span>Map</span></a></li>

			<li><a href='customer.jsf'><span>Customer</span></a></li>
			<li><a href='user.jsf'><span>User</span></a></li>

		</ul>
	</ui:define>

	<ui:define name="main-content">
		<h:form>
			<p:poll listener="#{map.drawMapOnStart}" update=":growl,:map"
				autoStart="false" interval="1"
				oncomplete="handlePollComplete(xhr, status, args)"
				widgetVar="mypoll" />
		</h:form>
		<div style="height: 690px; min-height: 700px; padding-right: 0px">
			<p:growl id="growl" showDetail="true"></p:growl>
			<h:form>
				<div style="float: left; margin: 10px">
					<p:growl id="growl" showDetail="true" />
					<h:outputText value="Route of Taxi #{map.taxi.taxiId}"></h:outputText>
					<br></br> <br></br> <span style="float: left;"> <h:outputText
							value="Choose day from"></h:outputText></span> <br></br>
					<p:calendar effect="fadeIn" value="#{map.dateStart}" id="startDay"
						locale="vi" required="true" requiredMessage="Choose started date">
					</p:calendar>
					<br></br> <span style="float: left;"><h:outputText
							value="to"></h:outputText></span> <br></br>
					<p:calendar effect="fadeIn" value="#{map.dateEnd}" required="true"
						locale="vi" requiredMessage="Choose ended date" />
					<br></br> <span style="float: left; margin-top: 5px"><p:commandButton
							actionListener="#{map.onViewClick}" value="View" type="submit"
							update=":map,:growl">
						</p:commandButton> </span>
				</div>
			</h:form>
			<div id="mapdiv"
				style="float: right; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; padding-left: 0px">
				<p:gmap id="map" center="#{map.mapCenter}" type="ROADMAP"
					zoom="#{map.zoomLevel}" fitBounds="false" style="width:720px;height:700px;"
					model="#{map.map}">
					<p:ajax event="overlaySelect" listener="#{map.onMarkerSelect}"
						update=":growl" />
				</p:gmap>

			</div>
		</div>
	</ui:define>

</ui:composition>




